<template>
  <div class="box1">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for='(item,key) in list' :key='key'>
          <img  :src="item.picUrl" alt="">
      </van-swipe-item>
    </van-swipe>
    <div class="box2">
        <ul>
            <li>
                <van-icon name="chat-o" />
                <p>签到</p>
            </li>
            <li>
                <van-icon name="fire-o" />
                <p>礼券</p>
            </li>
            <li>
                <van-icon name="gift-o" />
                <p>砍价</p>
            </li>
            <li>
                <van-icon name="flower-o" />
                <p>专栏</p>
            </li>
        </ul>
    </div>
    <p class="box3"></p>
    <div class="box4">
        <p @click="$router.push('/kjxq')">
             <span>全民砍价</span>
             <van-icon name="arrow" />
        </p>
        <kan @click.native="$router.push('/kjxq')" :kj='kj1'></kan>
    </div>
    <div class="box4">
        <p @click="$router.push('/jxxq')">
             <span>精选专题</span>
             <van-icon name="arrow" />
        </p>
        <jx  @click.native="$router.push('/jxxq')" :jx='jx'></jx>
    </div>
    <div class="box4">
        <p @click="$router.push('/tjxq')">
             <span>人气推荐</span>
             <van-icon name="arrow" />
        </p>
        <tj  @click.native="$router.push('/tjxq')" :rq='rq'></tj>
    </div>
  </div>
</template>

<script>
import kan from "@/components/kan/kan"
import jx from "@/components/jingxuan/jx"
import tj from "@/components/renqi/tj"
export default {
    components:{kan,jx,tj,},
    data() {
        return {
            //轮播图
            list:[],
            //砍价下数据
            kj:[],
            kj1:[],
            //精选数据
            jx:[],
            jxxq:[],
            //人气推荐
            rq:[],
            rq1:[]
        }
    },
    mounted() {
        this.getbanner()
        this.getkan()
        this.getjx()
        this.getrq()
    },
    methods: {
        //轮播图
        getbanner(){
            this.$http.get('banner/list').then(res=>{
                console.log(res)
                this.list=res.data.data
            }).catch(err=>{
                console.log(err.response)
            })
        },
        //砍价下数据
        getkan(){
            this.$http.post(`/shop/goods/kanjia/list`).then(res=>{
                console.log(res)
                var arr=res.data.data.goodsMap
                for (var key in arr){
                    this.kj.push(arr[key])
                }
                var list1=this.kj.slice(-2)  
                this.kj1=list1          
            }).catch(err=>{
                console.log(err.response)
            })
        },
        //精选数据
        getjx(){
            this.$http.get('/cms/news/list').then(res=>{
                this.jx=res.data.data
            })
        },
        //人气推荐数据
        getrq(){
            this.$http.get('/shop/goods/list').then(res=>{
                this.rq=res.data.data
                this.rq=this.rq.slice(-4)
            })
        }
    },
};
</script>

<style lang='scss' scoped>
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    img{
        width: 100%;
    }
  }
  .box1{
      width: 100%;
      position: relative;
      .box2{
          width: 100%;
          height: 100px;
          background: #fff;
          position: absolute;
          left: 0;
          top: 340px;
          border-radius:16% 16% 0 0;
          ul{
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              li{
                  width: 25%;
                  text-align: center;
                  .van-icon{
                      font-size: 30px;
                  }
              }
          }
      }
      .box3{
          width: 100%;
          height: 20px;
          background: #ccc;
          margin-top: 50px;
      }
      .box4{
          width: 100%;
          p{
              width: 100%;
              line-height: 50px;
              border-bottom:1px solid #ccc ;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 20px;
          }
      }
  }

</style>